<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #map {
            width: 640px;
            height: 400px;
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script src="https://api.map.baidu.com/api?v=3.0&type=webgl&ak=SsstGAdGm65rD0zoPT29YBO6g0B0zyGR"></script>
    <script>
        let mapdiv = document.getElementById('map');
        let map = new BMapGL.Map(mapdiv); //地图实例
        // 设置地图的初始化状态  纬度：39, 经度：116
        let point = new BMapGL.Point(116, 39);
        map.centerAndZoom(point, 15);
        map.enableScrollWheelZoom(true);

        //添加缩放控件对象
        let zoomControl = new BMapGL.ZoomControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT
        });
        map.addControl(zoomControl)
        //添加比例尺控件
        let scaleControl = new BMapGL.ScaleControl();
        map.addControl(scaleControl);
        //添加定位控件
        let geoControl = new BMapGL.LocationControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT
        });
        map.addControl(geoControl)

        //定义一个控件
        function ZoomControl() {
            this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;
            this.defaultOffset = new BMapGL.Size(20, 20);
        }
        //通过JavaScript的prototype属性继承于BMap.Control
        ZoomControl.prototype = new BMapGL.Control();

        //自定义控件必须实现自己的initialize方法，并且将控件的DOM元素返回
        //在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
        ZoomControl.prototype.initialize = function (map) {
            //创建一个dom元素
            var div = document.createElement('div');
            //添加文字说明
            div.appendChild(document.createTextNode('放大2级'));
            // 设置样式
            div.style.cursor = "pointer";
            div.style.padding = "7px 10px";
            div.style.backgroundColor = "black";
            div.style.color = "white";

            // 绑定事件,点击一次放大两级
            div.onclick = function (e) {
                map.setZoom(map.getZoom() + 2);
            }
            // 添加DOM元素到地图中
            map.getContainer().appendChild(div);
            // 将DOM元素返回
            return div;
        }
        //创建控件元素
        var myZoomCtrl = new ZoomControl();
        //添加到地图中
        map.addControl(myZoomCtrl);

        //逆地址解析服务  通过经纬度获取详细地
        let geoloc = window.navigator.geolocation;
        geoloc.getCurrentPosition((suc) => {
            let lat = suc.coords.latitude;
            let log = suc.coords.longitude;
            let geoc = new BMapGL.Geocoder();
            let p = new BMapGL.Point(log,lat);
            geoc.getLocation(p, (res) => {
                console.log(res);
            })
        })




    </script>
</body>

</html>